<template>
  <div class = "home">
  <home-header class = "homeheader" :city = 'city'></home-header>
  <home-swiper :swiperList = 'swiperList'></home-swiper>
  <home-catalog :catalogList = 'catalogList'></home-catalog>
  <home-hot :hotleftList = 'hotleftList' :hotrightitemList = 'hotrightitemList'></home-hot>
  <home-weekend :weekendList = 'weekendList'></home-weekend>
  <home-guess :guessList = 'guessList'></home-guess>
  
  </div>
</template>

<script> 
import axios from 'axios'
import homeHeader from './components/homeHeader'
import homeSwiper from './components/homeSwiper'
import homeCatalog from './components/homeCatalog'
import homeHot from './components/homeHot'
import homeWeekend from './components/homeWeekend'
import homeGuess from './components/homeGuess'



export default {
  name: 'Home',
  components:{
      homeHeader,
      homeSwiper,
      homeCatalog,
      homeHot,
      homeWeekend,
      homeGuess,
  },
  data(){
    return{
      city:'',
      swiperList:[],
      catalogList:[],
      hotleftList:[],
      hotrightitemList:[],
      weekendList:[],
      guessList:[],
    }
  },
  methods:{
    getHomeData(){
      axios.get("/api/index.json")
        .then(this.getHomeDataSucc)
    },
    getHomeDataSucc(res){
      
      res = res.data
      if(res.data){
        const data = res.data
        this.swiperList = data.swiperList
        this.city = data.city
        this.catalogList = data.catalogList
        this.hotleftList = data.hotleftList
        this.hotrightitemList = data.hotrightitemList
        this.weekendList = data.weekendList
        this.guessList = data.guessList
      }
    }
  },
  mounted(){
    this.getHomeData()
  }
  
}
</script>

<style lang = "stylus" scoped>
.home
  position relative
  .homeheader
    position fixed
    z-index 100 
    width 100%
</style>
